<template>
  <!-- <div class="order_card" >
    <section class="goodsList_box" v-for="(item, index) in this.GoodsLists" :key="index">
      <van-card
        :num="item.num"
        :price="Math.floor(item.price * 100)/100"
        :desc="item.subname"
        :title="item.name"
        :thumb="item.image_url"
      />
      
    </section>
    <submit :togglePrcie="toggleGoodsListsPrice" />
  </div> -->
  <div class="order_card">
    <section class="goodsList_box" v-for="(item,index) in this.currentGoods" :key="index">
      <van-card
        :num="value"
        :price="item.price"
        :desc="item.subname"
        :title="item.name"
        :thumb="item.image_url"
      />
      <div class="num">
        <van-stepper v-model="value" @change="changeNum(value,item.id)"/>
      </div>
      <submit 
        :togglePrcie="togglePrcie" 
        :list="list"
        @goodsPayState="$emit('goodsPayState',$event)"
        />
    </section>
  </div>
</template>

<script>
import submit from "../../components/order/submit.vue";

export default {
  props: [ "currentBuyGoods", "changeAddress", "colect","list"],
  components: {
    submit,
  },
  data() {
    return {
      value: null,
      price: 0,
      GoodsLists: [],
      currentGoods:[],
      goods: [],
    };
  },
  created() {
    this.addressFun();
    this.goods = require("../../../public/jSON/good");
    this.getGoodFun(this.currentBuyGoods.id);
    this.goodslistFun();
    this.value = this.currentBuyGoods.num
    console.log(this.value);
  },
  methods: {
    changeNum(val,id){
      console.log(val);
      console.log(id);
      let index = this.currentGoods.findIndex(  (item)=>{
        return item.id == id
      })
      this.currentGoods[index].num = val;
      console.log(this.currentGoods[index].num);
      this.$emit("changeNum",val)
    },
    addressFun() {
      if (this.changeAddress) {
        this.list = this.changeAddress;
      }
    },
    goodslistFun() {
      let newArr = [];
      if (this.colect) {
        for (let i = 0; i < this.colect.length; i++) {
          for (let j = 0; j < this.goods.length; j++) {
            if (this.colect[i].id == this.goods[j].id) {
              this.goods[j].num = this.colect[i].num;
              newArr.push(this.goods[j]);
              // newArr[i].num = this.colect[j].num
            }
          }
        }
      }
      // console.log(newArr);
      this.GoodsLists = newArr;
    },
    getGoodFun(val) {
      let arr = [];
      for (let i = 0; i < this.goods.length; i++) {
        if (this.goods[i].id == val) {
          this.goods[i].num = this.currentBuyGoods.num;
          arr.push(this.goods[i]);
        }
      }
      this.currentGoods = arr;
      console.log(this.currentGoods);
    },
  },
  computed: {
    togglePrcie() {
      return +this.currentGoods[0].price * this.value;
    },
    toggleGoodsListsPrice(){
       return this.GoodsLists.reduce((prl, item) => {
          return prl + item.price * item.num;
        }, 0);
    }
  },
};
</script>

<style lang="less" scoped>
.order_card {
  .goodsList_box {
    .num {
      overflow: hidden;
      background-color: white;
      .van-stepper {
        float: right;
        margin: 10px;
      }
    }
    .van-card {
      background-color: white;
    }
  }
}
</style>